<template>
	<view>
		<!-- 垂直排列 -->
		<template v-if="model === 'vertical'">
			<view class="u-flex u-m-l-30 u-m-r-30 u-m-t-30" v-for="(listItem, index) in dataList" :key="index" >
				<view class="u-flex-1 bg-white b-r-30" style="position: relative;" :class="{'u-m-r-15': index1 == 0,'u-m-l-15': index1 == 1}" v-for="(item, index1) in listItem" :key="index1" @click="handleGoodsDetail(item)">
					<template v-if="item.skuShortName">
						<view >
							<image :src="item.goodsCover" mode="aspectFill" style="width: 100%; height:320rpx;border-radius: 30rpx 30rpx 0rpx 0rpx;"></image>
						</view>
						<view class="u-p-l-30 u-p-r-30 u-p-b-20">
							<view class="u-m-t-20 text-money" v-if="item.type == 'shopGoods'">
								<text class="u-font-22 u-m-r-5">¥</text>
								<u-count-to :duration="countDuration" :startVal="0" :endVal="formatMoney(item.sellPrice)" color="#C16D09" fontSize="20" bold :decimals="formatMoney(item.sellPrice) < 1 ? 2 : 0" separator="," ></u-count-to>
							</view>
							<view class="u-m-t-20 text-money" v-else>
								<u-count-to :duration="countDuration" :startVal="0" :endVal="item.sellPrice" color="#C16D09" fontSize="20" bold decimals="0" separator="," ></u-count-to>
								<text class="u-font-22 u-m-l-5">积分</text>
							</view>
							<view class="u-m-t-10 u-line-2">
								<text>{{item.skuShortName}}</text>
							</view>	
							<view class=" u-line-1" style="opacity: 0.5;" v-if="item.skuName">
								<text>{{item.skuName}}</text>
							</view>	
						</view>
						<view style="position: absolute; top: 290rpx;right: 10rpx;">
							<image src="~@/static/images/home/shopping_cart.svg" style="width: 70rpx; height: 70rpx;"></image>
						</view>
					</template>			
				</view>
			</view>
		</template>
		<!-- 水平排列 -->
		<template v-else>
			<u-scroll-list indicatorWidth="0">				
				<view v-for="(item, index) in dataList" :key="index" class="u-m-r-20" >
					<view class="bg-white b-r-30 u-p-l-20 u-p-r-20" style="width: 200rpx;" @click="handleGoodsDetail(item)">
						<view>
							<image :src="item.goodsCover" mode="aspectFill" style="height: 200rpx;width: 100%; border-radius: 30rpx 30rpx 0rpx 0rpx;"></image>
						</view>
						<view class="u-text-center u-p-t-10 u-p-b-10">
							<view>{{item.skuShortName}}</view>
							<view class="text-money text-bold u-m-t-10">
								<text class="u-m-r-5 u-font-24">¥</text>
								<u-count-to :duration="countDuration" :startVal="0" :endVal="formatMoney(item.sellPrice)" color="#C16D09" fontSize="16" bold decimals="0" separator=","></u-count-to>
							</view>
						</view>
					</view>
				</view>
			</u-scroll-list>
		</template>
	</view>
</template>

<script>
	import {goodsSpuList} from '@/api/home.js'
	import {getPointRecommendList} from '@/api/point.js'
	import {jumpTypeEnum, BooleanEnum, goodsSpuTypeEnum} from '@/common/const.js'
	
	export default{
		props:{
			// horizontal: 水平排列
			// vertical: 垂直排列
			model: {
				type: String,
				default: 'vertical'
			},
			isShowPointMall: {
				type: Boolean,
				default: false
			},
			isShowSku: {
				type: Boolean,
				default: false
			},
			spuType:{
				type: String,
				default: goodsSpuTypeEnum.common
			}
		},
		data(){
			return{
				goodsSpuTypeEnum,
				countDuration:200,
				// 热销商品
				dataList:[]
			}
		},
		methods:{
			/**
			 * 初始化
			 */
			async init(){
				this.dataList = []
				let data = []
				
				if(this.isShowSku){
					// 获取商品列表
					let res = await goodsSpuList({
						spuType: this.spuType
					})
					res.data.forEach(spu=>{
						spu.skus.forEach(sku=>{
							// 存在二级推荐的场合
							if(sku.hasRecommend == BooleanEnum.TRUE){
								//sku.goodsCover = sku.bannerImages.split(',')[0]
								let images = JSON.parse(sku.bannerImages)
								if(images && images.length > 0){
									sku.goodsCover = images[0].materialUrl
								}
								sku.type = 'shopGoods'
								data.push(sku)
							}
						})
					})
				}
				
				
				if(this.isShowPointMall){
					// 获取积分商城推荐的商品
					let pointGoods = await getPointRecommendList()
					pointGoods.data.forEach(spu=>{
						if(spu.bannerImages){
							let images = JSON.parse(spu.bannerImages)
							if(images.length > 0){
								// 获取sku封面
								if(!spu.hasOwnProperty('goodsCover')){
									this.$set(spu, 'goodsCover', images[0].materialUrl)
								} else {
									spu.goodsCover = images[0].materialUrl
								}
							}
						}
						data.push({
							goodsCover: spu.goodsCover,
							type:'pointGoods',
							skuShortName: spu.spuTitle,
							sellPrice: spu.point,
							spuId: spu.id
						})
					})
				}
				
				
				if(data.length > 0){
					// 补齐空对象
					if(this.model == 'vertical'){
						let temp = data.length % 2
						if(temp == 1){
							data.push({})
						}
						
						let rows = null
						for(let i = 0; i < data.length; i++){
							let mod = i % 2
							if(mod == 0){
								rows = []
								rows.push(data[i])
								this.dataList.push(rows)
							} else {
								rows.push(data[i])
							}
						}
					} else {
						data.forEach(sku=>{
							this.dataList.push(sku)
						})
					}
				}
			},
			
			/**
			 * 商品详情
			 */
			handleGoodsDetail(item){
				if(item.type == 'shopGoods'){
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/goods/detail?spuId=${item.spuId}&skuId=${item.id}`, false)
				} else if(item.type == 'pointGoods'){
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/points_mall/detail?id=${item.spuId}`, false)
				}
			},
			
			/**
			 * 分转元
			 */
			formatMoney(val){
				return this.formatMoneyToYuan(val)
			},
		}
	}
</script>

<style scoped>	
	.text-money{
		color: #C16D09;
	}
</style>